<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator=">" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">设备管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home" @click="back()">传感器管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">异常统计数据</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>

    <div class="searchBox" style=" display: flex;z-index: 100000;">
      <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">

        <el-form-item label="">
          <el-select @change="changeDate" v-model="searchForm.timeType" placeholder="请选择时间">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker @change="getChart" :picker-options="pickerOptions" v-model="startAndEndTime" align="right" type="datetimerange" value-format=yyyy-MM-dd format=yyyy-MM-dd range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <div class="search-btn" @click="onSubmit"></div>
        </el-form-item>
        <el-form-item>
          <div class="reset-btn" @click="resetForm"></div>
        </el-form-item>
      </el-form>
    </div>
    <div style=" margin: 1rem;margin-top:-1rem;display: flex;">
      <div style="width: 100%;min-height: 50rem;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="列表" name="first">
            <NxTable :table-cols="tableCols" :table-data="tableData" :pag-ination="pagination" class="table-wrap" @refresh="refresh">
              <template slot="type" slot-scope="scope">
                <span v-if="scope.row.type==0">数值告警</span>
                <span v-if="scope.row.type==1">离线告警</span>
              </template>
              <template slot="deviceType" slot-scope="scope">
                <span v-if="scope.row.deviceType==0">数值设备</span>
                <span v-if="scope.row.deviceType==1">开关设备</span>
              </template>

            </NxTable>
          </el-tab-pane>
          <el-tab-pane label="图表" name="second">
            <div v-if="activeName=='second'">

              <div class="length">
                <div class="litem">
                  <img class="modalmax" src="@/assets/modalmax.png" />
                  <span>最大值</span>
                </div>
                <div class="litem">
                  <img class="modalmin" src="@/assets/modalmin.png" />
                  <span>最小值</span>
                </div>
                <div class="litem">
                  <div class="line"></div>
                  <span>平均值</span>
                </div>
              </div>
              <div class="flexc">
                <div id="echart1" class="echartline"></div>
              </div>
            </div>
          </el-tab-pane>

        </el-tabs>

      </div>

    </div>
  </div>
</template>
<script>
import { Page } from '@/utils/pagination'
import NxTable from '@/components/NxTable.vue'

import { getAlarmAndOnlineDataList, getAlarmAndOnlineDataChart } from '@/api/home'
import { getNumericalDataChart } from '@/api/device'
import * as echarts from 'echarts'

export default {
  components: {
    NxTable
  },
  props: {},
  // 表格数据
  data() {
    return {
      startAndEndTime: '',
      activeName: 'first',
      // 查询字段
      searchForm: {
        id: '',
        type: 0,
        timeType: '2'
      },
      tableData: [],
      typeDialog: false,
      addEditIsDialog: false, // 添加编辑页面状态
      date: [], // 日期范围
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      options: [
        {
          value: '0',
          label: '最近一天'
        },
        {
          value: '1',
          label: '最近一周'
        },
        {
          value: '2',
          label: '最近一月'
        },
        {
          value: '3',
          label: '最近一年'
        }
      ],
      modeType: [
        { value: 0, label: '数值' },
        { value: 1, label: '离线' }
      ],
      tableCols: [
        {
          label: '控制箱名称',
          prop: 'boxName',
          align: 'center'
          // width: 250,
        },
        {
          label: '报警类型',
          prop: 'alarmType',
          align: 'center'
          // width: 200,
        },
        {
          label: '设备名称',
          prop: 'deviceName',
          align: 'center'
          // width: 250,
        },
        {
          label: '设备类型',
          slot: 'deviceType',
          align: 'center'
          // width: 250,
        },
        {
          label: '鱼池',
          prop: 'fishpondName',
          align: 'center'
          // width: 200,
        },
        {
          label: '告警值',
          prop: 'value',
          align: 'center'
          // width: 200,
        },
        {
          label: '开始时间',
          prop: 'startDate',
          align: 'center',
          width: 200
        },
        {
          label: '结束时间',
          prop: 'endDate',
          align: 'center',
          width: 200
        }
      ],
      tableData: [],
      pagination: new Page()
    }
  },
  // 初始化加载
  mounted() {
    this.searchForm.id = this.$route.query.attributeCode //30
    this.searchForm.type = this.$route.query.type
    this.seeType = false

    // 查询
    this.getList()
    this.getLists()
  },
  // 自定义方法
  methods: {
    handleClick(val) {
      this.getList()
      this.getLists()
    },
    getChart(val) {
      console.log(val)
      this.searchForm.timeType = ''
      this.searchForm.startDate = val[0]
      this.searchForm.endDate = val[1]
      this.getList()
      this.getLists()
    },
    // 返回
    back() {
      this.$router.push({
        path: `/device/sensor`
      })
    },
    // 重置
    resetForm() {
      this.startAndEndTime = ''
      this.searchForm.startDate = ''
      this.searchForm.endDate = ''
      this.onSubmit()
    },
    // 查询
    onSubmit() {
      this.pagination.pageNum = 1
      this.getList()
      this.getLists()
    },
    // 分页查询
    refresh(val) {
      this.searchForm.pageNum = val.pageNum
      this.searchForm.pageSize = val.pageSize
      this.getLists()
    },
    changemode(nowd) {
      this.searchForm.type = nowd
      this.getList()
      this.getLists()
    },
    // 范围切换
    changeDate(nowd) {
      this.searchForm.timeType = nowd
      // console.log(nowd);
      this.getList()
      this.getLists()
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    },
    // 获取列表列表
    getLists() {
      getAlarmAndOnlineDataList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data
          this.pagination.count = res.data.total
        }
      })
    },
    // 查询图表列表
    getList() {
      getAlarmAndOnlineDataChart(this.searchForm).then((res) => {
        if (res.code == 200) {
          console.log(res.data)
          if (res.data.xtimes.length > 0 && res.data.ydatas.length > 0) {
            console.log(222222)
            let xdata = [],
              ydata = []
            console.log(res.data)
            res.data.xtimes.forEach((item) => {
              xdata.push(this.getLocalTime(item))
            })
            res.data.ydatas.forEach((item) => {
              ydata.push(item.value)
            })
            console.log(xdata, ydata)
            this.initLineChart('echart1', xdata, ydata)
          } else {
            this.initLineChart('echart1', [], [])
          }
        }
      })
    },
    // 初始化折线数据
    initLineChart(id, xdata, ydata, markdata) {
      let chartDom = echarts.getInstanceByDom(document.getElementById(id)) //获取已有echarts实例的DOM节点
      if (chartDom == null) {
        // 节点不存在，进行初始化
        chartDom = echarts.init(document.getElementById(id))
      }

      chartDom.setOption({
        backgroundColor: '',
        color: ['#27CDFF'],
        grid: {
          left: '6%',
          right: '6%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              width: 0.1,
              color: '#9BB7EF'
            }
          },
          //    axisLabel:{
          //         rotate:20,
          //    },
          type: 'category',
          data: xdata
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              width: 0.1,
              color: '#9BB7EF'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#F1F2F3'],
              width: 0.1
            }
          }
        },
        series: [
          {
            //   title:'大气温度',
            data: ydata,
            type: 'line',
            smooth: true,
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '平均值',
                  lineStyle: { color: '#00FCF9' }
                }
              ]
            },
            markPoint: {
              itemStyle: { normal: { label: { color: '#FFFFFF' } } },
              data: [
                {
                  type: 'max',
                  name: '最大值',
                  itemStyle: { color: '#FF3A00' }
                },
                {
                  type: 'min',
                  name: '最小值',
                  itemStyle: { color: '#8898A8' }
                }
              ]
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.1,
                  color: 'RGBA(44, 104, 139, 0.6)'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 0)'
                }
              ])
            }
          }
        ]
      })
    }
  }
}
</script>
<style lang="less" scoped>
.searchBox {
  margin: 1rem;
  margin-bottom: 0rem;
  margin-left: 2rem;
  justify-items: center;
}
/deep/.el-tabs__item {
  font-size: 1rem;
}

.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;

  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;

    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }

    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}

.length {
  position: absolute;
  top: 2rem;
  right: 3.74rem;
  display: flex;
  align-items: center;

  .litem {
    display: flex;
    align-items: center;
    color: black;
    font-size: 0.93rem;
    margin-left: 2.1vw;

    img {
      width: 0.94vw;
      height: 1.1vw;
      margin-right: 0.5vw;
    }

    .line {
      width: 0.94vw;
      margin-right: 0.47vw;
      border-top: 1px dashed #00fcf9;
    }
  }
}

.flexc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.echartline {
  width: 100%;
  height: 22vw;
  margin-top: 10.4vw;
}
</style>
  